
<template>
  <ElConfigProvider
    :locale="zhCn"
    :size="size"
    :z-index="zIndex"
    :button="buttonConfig"
    :message="messageConfig"
    :value-on-clear="() => null"
    :empty-values="[undefined, null]"
  >
    <PageTable :tableProps="tableProps" :columns="columns" :tableData="tableData" />
  </ElConfigProvider>
</template>

<script setup lang="ts">
import PageTable from "@/packages/pageTable/index.vue"
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { ElConfigProvider, ElTag } from 'element-plus'

interface TableDataItem {
  date: string,
  name: string,
  address: string,
  id: number
}
const size = 'small';
const zIndex = 3000;
const buttonConfig = {
  autoInsertSpace: true,
}
const messageConfig = {
  max: 3,
}

const tableData: TableDataItem[] = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    id:1
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    id:2
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    id:3
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    id:4
  },
]
const tableProps = {
  cellClassName:'cell-name',
  rowStyle: (data: { row: TableDataItem }) => {
    if(data?.row?.id === 2){
      return {
        color: 'red'
      }
    }else{
      return {
        color: '#000'
      }
    }
  },
};
const columns = [
  {
    label:'日期',
    prop:'date',
    align:'left',
    slots: `<ElTag>12121212</ElTag>`
  },
  {
    label:'名称',
    prop:'name',
    align:'center',
  },
  {
    label:'地址',
    prop:'address',
    align:'center'
  }
]
</script>





